@extends('frontend.layouts.app')
@section('script')
@endsection
@section('css')
    <style>
        .nav-menu {
            width: 85px;
            height: 85px;
            line-height: 85px;
            border: 1px solid #DDDDDD;
            margin: 0 auto
        }

        .nav-menu img {
            width: 65px;
            height: 65px;
        }

        @media (max-width: 767.98px) {
            .mobile-img-auto-height img {
                height: 151px;
            }

            .nav-menu {
                width: 45px;
                height: 45px;
                line-height: 45px;
                border: 1px solid #DDDDDD;
                margin: 0 auto
            }

            .nav-menu img {
                width: 25px;
                height: 25px;
            }

            .col-xs-5ths {
                max-width: 20%;
                flex: 0 0 20%;
                float: left;
            }
            .top-header{
                background-color: #fff;
                margin-bottom: 1.5rem;
                padding-top: 10px;
            }
        }


        .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
            position: relative;
            min-height: 0px;
            padding-left: 0px;
            padding-right: 0px;

        }

    </style>


@endsection

@section('content')
    {{-- Categories , Sliders . Today's deal --}}
    <div class="home-banner-area mb-4 pt-3">
        <div class="container">
            <div class="row gutters-10 position-relative">
                <div class="col-lg-3 position-static d-none">
                    @include('frontend.partials.category_menu')
                </div>

                @php
                    $num_todays_deal = count($todays_deal_products);
                @endphp

                <div class="@if($num_todays_deal > 0)col-lg-10 @else col-lg-9 @endif top-header">
                    @if (get_setting('home_slider_images') != null)
                        <div class="aiz-carousel dots-inside-bottom mobile-img-auto-height" data-arrows="true"
                             data-dots="true" data-autoplay="true">

                            @foreach ($slider_images as $key => $value)
                                <div class="carousel-box">
                                    <a href="{{ json_decode(get_setting('home_slider_links'), true)[$key] }}">
                                        <img
                                            class="d-block mw-100 img-fit rounded shadow-sm overflow-hidden"
                                            alt="{{ env('APP_NAME')}} promo"
                                            @if(count($featured_categories) == 0)
                                                height="457"
                                            @else
                                                height="315"
                                            @endif
                                             onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';"
                                             src="{{ uploaded_asset($value) }}"
                                        >
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    @if (count($featured_categories) > 0)
                        <ul class="list-unstyled mb-0 row gutters-5">
                            @php
                                $i = 1;
                            @endphp
                            @foreach ($featured_categories as $key => $category)
                                <li class="minw-0 col-4 col-md mt-3 col-xs-5ths @if($i > 5)  d-none d-md-block @endif">
                                    <a href="{{ route('products.category', $category->slug) }}"
                                       class="d-block p-2 text-reset text-center">
                                        <div class="bg-white rounded-circle nav-menu">
                                            <img
                                                src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                data-src="{{ uploaded_asset_self(array_get($images,$category->banner)) }}"
                                                alt="{{ $category->getTranslation('name') }}"
                                                class="lazyload rounded-circle"
                                                onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';"
                                            >
                                        </div>

                                        <div
                                            class="text-center fs-12 fw-600 mt-2 ">{{ $category->getTranslation('name') }}</div>
                                    </a>
                                </li>
                                @php
                                    $i++;
                                    if($i == 8){
                                        break;
                                    }
                                @endphp
                            @endforeach
                        </ul>
                    @endif
                </div>


                @if (get_setting('home_banner1_images') != null)
                    <div class="d-block d-md-none d-lg-none"  style="width: 100%">
                        <div class="container">
                            <div class="row gutters-5">
                                @php $i = 1; @endphp
                                @foreach ($banner_1_imags as $key => $value)
                                    <div class="col-xl  ">
                                        <div class="mb-3 mb-lg-0">
                                            <a href="{{ array_get($home_banner1_links,$key)}}" class="d-block text-reset">
                                                <img src="{{ static_asset('assets/img/placeholder-rect.jpg') }}"
                                                     data-src="{{ uploaded_asset_self(array_get($images, $value)) }}"
                                                     alt="{{ env('APP_NAME') }} promo" class="img-fluid lazyload w-100" style="@if($i != 2) height: 74px;margin-top: 10px; @else height: 94px @endif">
                                            </a>
                                        </div>
                                    </div>
                                    @php $i++; @endphp
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
                @if($num_todays_deal > 0)
                    <div class="col-lg-2 order-3 mt-3 mt-lg-0">
                        <div class="bg-white rounded shadow-sm">
                            <div
                                class="bg-soft-primary rounded-top p-3 d-flex align-items-center justify-content-center">
                            <span class="fw-600 fs-16 mr-2 text-truncate">
                                {{ translate('Todays Deal') }}
                            </span>
                                <span class="badge badge-primary badge-inline">{{ translate('Hot') }}</span>
                            </div>
                            <div class="c-scrollbar-light overflow-auto h-lg-400px p-2 bg-primary rounded-bottom">
                                <div class="gutters-5 lg-no-gutters row row-cols-2 row-cols-lg-1">
                                    @php
                                        $i = 1;
                                    @endphp
                                    @foreach ($todays_deal_products as $key => $product)
                                        @if ($product != null)
                                            <div class="col mb-2 @if($i > 6)  d-none d-sm-block @endif">
                                                <a href="{{ route('product', $product->slug) }}"
                                                   class="d-block p-2 text-reset bg-white h-100 rounded">
                                                    <div class="row gutters-5 align-items-center">
                                                        <div class="col-xxl">
                                                            <div class="img">
                                                                <img
                                                                    class="lazyload img-fit h-140px h-lg-80px"
                                                                    src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                                    data-src="{{ uploaded_asset_self(array_get($images,$product->thumbnail_img)) }}"
                                                                    alt="{{ $product->getTranslation('name') }}"
                                                                    onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                                >
                                                            </div>
                                                        </div>
                                                        <div class="col-xxl">
                                                            <div class="fs-16">
                                                                <span
                                                                    class="d-block text-primary fw-600">{{ home_discounted_base_price($product) }}</span>
                                                                @if(home_base_price($product) != home_discounted_base_price($product))
                                                                    <del
                                                                        class="d-block opacity-70">{{ home_base_price($product) }}</del>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            @php
                                                $i++;
                                            @endphp
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>


    {{-- Banner section 1 --}}
    @if (get_setting('home_banner1_images') != null)
        <div class="mb-4 d-none d-md-block">
            <div class="container">
                <div class="row gutters-10">
                    @foreach ($banner_1_imags as $key => $value)
                        <div class="col-xl col-md-6">
                            <div class="mb-3 mb-lg-0">
                                <a href="{{ array_get($home_banner1_links,$key)}}" class="d-block text-reset">
                                    <img src="{{ static_asset('assets/img/placeholder-rect.jpg') }}"
                                         data-src="{{ uploaded_asset_self(array_get($images, $value)) }}"
                                         alt="{{ env('APP_NAME') }} promo" class="img-fluid lazyload w-100">
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif


    {{-- Flash Deal --}}
    @if($flash_deal != null && strtotime(date('Y-m-d H:i:s')) >= $flash_deal->start_date && strtotime(date('Y-m-d H:i:s')) <= $flash_deal->end_date)
        <section class="mb-4">
            <div class="container pt-4 pb-4"
                 style="background:url('{{ static_asset('assets/img/index/flash_bg1.png') }}');">
                <div class="px-2 py-4 px-md-4 py-md-3 shadow-sm rounded"
                     style="background:url('{{ static_asset('assets/img/index/flash_bg2.png') }}');background-size: 100%;">

                    <div class="d-flex flex-wrap mb-3 align-items-baseline border-bottom">
                        <h3 class="h5 fw-700 mb-0 flex-fill text-center d-none d-md-block">
                            <span class="pb-3 d-inline-block text-primary text-center"
                                  style="font-size: 40px;margin-left: 210px!important;">{{ translate('Flash Sale') }}</span>
                        </h3>
                        <div class="d-block d-md-none d-lg-none text-primary fs-20">Flash Sale</div>
                        <div class="aiz-count-down ml-auto ml-lg-3 align-items-center"
                             data-date="{{ date('Y/m/d H:i:s', $flash_deal->end_date) }}"></div>
                        <a href="{{ route('flash-deal-details', $flash_deal->slug) }}"
                           class="ml-auto mr-0 w-100 w-md-auto text-primary">{{ translate('View More') }} <i
                                class="la la-angle-right text-primary"></i></a>
                    </div>

                    <div class="aiz-carousel gutters-10 half-outside-arrow" data-items="6" data-xl-items="5"
                         data-lg-items="4" data-md-items="3" data-sm-items="2" data-xs-items="2" data-arrows='true'>
                        @foreach ($flash_deal_products_items as $key => $product)
                            @if ($product != null && $product->published != 0)
                                <div class="carousel-box">
                                    @include('frontend.partials.product_box_1',['product' => $product])
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif


    <div id="section_newest">
        @if (count($newest_products) > 0)
            <section class="mb-4">
                <div class="container">
                    <div class="px-2 py-4 px-md-4 py-md-3 bg-white shadow-sm rounded">
                        <div class="d-flex mb-3 align-items-baseline border-bottom">
                            <h3 class="h5 fw-700 mb-0">
                                <span class="pb-3 d-inline-block text-primary">
                                    {{ translate('New Products') }}
                                    <!--\u0069\u0073\u0068\u006f\u0070\u0034\u0036\u0037\u0039\u0038-->
                                </span>
                            </h3>
                        </div>
                        <div class="aiz-carousel gutters-10 half-outside-arrow" data-items="6" data-xl-items="5"
                             data-lg-items="4" data-md-items="3" data-sm-items="2" data-xs-items="2" data-arrows='true'>
                            @foreach ($newest_products as $key => $new_product)
                                <div class="carousel-box">
                                    @include('frontend.partials.product_box_1',['product' => $new_product])
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        @endif
    </div>

    {{-- Featured Section --}}
    <div id="section_featured">
    </div>

    {{-- Best Selling  --}}
    <div id="section_best_selling">

    </div>

    <!-- Auction Product -->
    @if(addon_is_activated('auction'))
        <div id="auction_products">

        </div>
    @endif



    {{-- Banner Section 2 --}}
    @if (get_setting('home_banner2_images') != null)
        <div class="mb-4">
            <div class="container">
                <div class="row gutters-10">

                    @foreach ($banner_2_imags as $key => $value)
                        <div class="col-xl col-md-6">
                            <div class="mb-3 mb-lg-0">
                                <a href="{{ array_get($home_banner2_links,$key)}}"
                                   class="d-block text-reset">
                                    <img src="{{ static_asset('assets/img/placeholder-rect.jpg') }}"
                                         data-src="{{ uploaded_asset_self(array_get($images,$value)) }}"
                                         alt="{{ env('APP_NAME') }} promo" class="img-fluid lazyload w-100">
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif



    {{-- Category wise Products --}}
    <div id="section_home_categories">

    </div>

    {{-- Classified Product --}}
    @if(get_setting('classified_product') == 1)
        @if (count($classified_products) > 0)
            <section class="mb-4">
                <div class="container">
                    <div class="px-2 py-4 px-md-4 py-md-3 bg-white shadow-sm rounded">
                        <div class="d-flex mb-3 align-items-baseline border-bottom">
                            <h3 class="h5 fw-700 mb-0">
                                <span
                                    class="text-primary pb-3 d-inline-block">{{ translate('Classified Ads') }}</span>
                            </h3>
                            <a href="{{ route('customer.products') }}"
                               class="ml-auto mr-0 text-primary">{{ translate('View More') }} <i
                                    class="la la-angle-right text-primary"></i></a>
                        </div>
                        <div class="aiz-carousel gutters-10 half-outside-arrow" data-items="6" data-xl-items="5"
                             data-lg-items="4" data-md-items="3" data-sm-items="2" data-xs-items="2" data-arrows='true'>
                            @foreach ($classified_products as $key => $classified_product)
                                <div class="carousel-box">
                                    <div
                                        class="aiz-card-box border border-light rounded hov-shadow-md my-2 has-transition">
                                        <div class="position-relative">
                                            <a href="{{ route('customer.product', $classified_product->slug) }}"
                                               class="d-block">
                                                <img
                                                    class="img-fit lazyload mx-auto h-140px h-md-210px"
                                                    src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                    data-src="{{ uploaded_asset_self(array_get($images,$classified_product->thumbnail_img)) }}"
                                                    alt="{{ $classified_product->getTranslation('name') }}"
                                                    onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';111"
                                                >
                                            </a>
                                            <div class="absolute-top-left pt-2 pl-2">
                                                @if($classified_product->conditon == 'new')
                                                    <span
                                                        class="badge badge-inline badge-success">{{translate('new')}}</span>
                                                @elseif($classified_product->conditon == 'used')
                                                    <span
                                                        class="badge badge-inline badge-danger">{{translate('Used')}}</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="p-md-3 p-2 text-left">
                                            <div class="fs-15 mb-1">
                                                <span
                                                    class="fw-700 text-primary">{{ single_price($classified_product->unit_price) }}</span>
                                            </div>
                                            <h3 class="fw-600 fs-13 text-truncate-2 lh-1-4 mb-0 h-35px">
                                                <a href="{{ route('customer.product', $classified_product->slug) }}"
                                                   class="d-block text-reset">{{ $classified_product->getTranslation('name') }}</a>
                                            </h3>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        @endif
    @endif

    {{-- Banner Section 2 --}}
    @if (get_setting('home_banner3_images') != null)
        <div class="mb-4 d-none d-md-block">
            <div class="container">
                <div class="row gutters-10">
                    @php $banner_3_imags = json_decode(get_setting('home_banner3_images')); @endphp
                    @foreach ($banner_3_imags as $key => $value)
                        <div class="col-xl col-md-6">
                            <div class="mb-3 mb-lg-0">
                                <a href="{{ array_get($home_banner3_links,$key) }}"
                                   class="d-block text-reset">
                                    <img src="{{ static_asset('assets/img/placeholder-rect.jpg') }}"
                                         data-src="{{ uploaded_asset_self(array_get($images,$value)) }}"
                                         alt="{{ env('APP_NAME') }} promo" class="img-fluid lazyload w-100">
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="mb-3 mx-3 d-block d-md-none d-lg-none">
            <div class="aiz-carousel dots-inside-bottom mobile-img-auto-height" data-arrows="true"
                 data-dots="true" data-autoplay="true">
                @php $slider_images = json_decode(get_setting('home_banner3_images')); @endphp
                @foreach ($slider_images as $key => $value)
                    <div class="carousel-box">
                        <a href="{{ array_get($home_banner3_links,$key) }}">
                            <img
                                class="d-block mw-100 img-fit rounded shadow-sm overflow-hidden"
                                src="{{ uploaded_asset_self(array_get($images,$value)) }}"
                                alt="{{ env('APP_NAME')}} promo"
                                height="151"
                                onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';"
                            >
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Best Seller --}}
    <div id="section_best_sellers">

    </div>

    {{-- Top 10 categories and Brands --}}
    @if (get_setting('top10_categories') != null && get_setting('top10_brands') != null)
        <section class="mb-4" style="display: none">
            <div class="container">
                <div class="row gutters-10">
                    @if (get_setting('top10_categories') != null)
                        <div class="col-lg-6">
                            <div class="bg-white shadow-sm rounded px-2 py-4 px-md-4 py-md-3">
                                <div class="d-flex mb-3 align-items-baseline border-bottom">
                                    <h3 class="h5 fw-700 mb-0">
                                    <span
                                        class="text-primary pb-3 d-inline-block">{{ translate('Top 10 Categories') }}</span>
                                    </h3>
                                    <a href="{{ route('categories.all') }}"
                                       class="ml-auto mr-0 text-primary">{{ translate('View All Categories') }} <i
                                            class="la la-angle-right text-primary"></i></a>
                                </div>
                                <div class="row gutters-5">
                                    @foreach ($top10Categories as $key => $category)

                                        <div class="col-6">
                                            <a href="{{ route('products.category', $category->slug) }}"
                                               class="bg-white border d-block text-reset rounded p-2 hov-shadow-md mb-2">
                                                <div class="row align-items-center no-gutters">
                                                    <div class="col-3 text-center">
                                                        <img
                                                            src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                            data-src="{{ uploaded_asset_self(array_get($images,$category->banner)) }}"
                                                            alt="{{ $category->getTranslation('name') }}"
                                                            class="img-fluid img lazyload h-60px"
                                                            onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                        >
                                                    </div>
                                                    <div class="col-7">
                                                        <div
                                                            class="text-truncat-2 pl-3 fs-14 fw-600 text-left">{{ $category->getTranslation('name') }}</div>
                                                    </div>
                                                    <div class="col-2 text-center">
                                                        <i class="la la-angle-right text-primary"></i>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                    @if (get_setting('top10_brands') != null)
                        <div class="col-lg-6">
                            <div class="bg-white shadow-sm rounded px-2 py-4 px-md-4 py-md-3">
                                <div class="d-flex mb-3 align-items-baseline border-bottom">
                                    <h3 class="h5 fw-700 mb-0">
                                        <span
                                            class="pb-3 d-inline-block text-primary">{{ translate('Top 10 Brands') }}</span>
                                    </h3>
                                    <a href="{{ route('brands.all') }}"
                                       class="ml-auto mr-0 text-primary">{{ translate('View All Brands') }} <i
                                            class="la la-angle-right text-primary"></i></a>
                                </div>
                                <div class="row gutters-5">
                                    @foreach ($brands as $key => $brand)
                                        <div class="col-6">
                                            <a href="{{ route('products.brand', $brand->slug) }}"
                                               class="bg-white border d-block text-reset rounded p-2 hov-shadow-md mb-2">
                                                <div class="row align-items-center no-gutters">
                                                    <div class="col-4 text-center">
                                                        <img
                                                            src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                            data-src="{{ uploaded_asset_self(array_get($images,$brand->logo)) }}"
                                                            alt="{{ $brand->getTranslation('name') }}"
                                                            class="img-fluid img lazyload h-60px"
                                                            onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                        >
                                                    </div>
                                                    <div class="col-6">
                                                        <div
                                                            class="text-truncate-2 pl-3 fs-14 fw-600 text-left">{{ $brand->getTranslation('name') }}</div>
                                                    </div>
                                                    <div class="col-2 text-center">
                                                        <i class="la la-angle-right text-primary"></i>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif

@endsection

@section('script')

    <script>
        $(document).ready(function () {
            $.post('{{ route('home.section.featured') }}', {_token: '{{ csrf_token() }}'}, function (data) {
                $('#section_featured').html(data);
                AIZ.plugins.slickCarousel();
            });
            $.post('{{ route('home.section.best_selling') }}', {_token: '{{ csrf_token() }}'}, function (data) {
                $('#section_best_selling').html(data);
                AIZ.plugins.slickCarousel();
            });
            $.post('{{ route('home.section.auction_products') }}', {_token: '{{ csrf_token() }}'}, function (data) {
                $('#auction_products').html(data);
                AIZ.plugins.slickCarousel();
            });
            $.post('{{ route('home.section.home_categories') }}', {_token: '{{ csrf_token() }}'}, function (data) {
                $('#section_home_categories').html(data);
                AIZ.plugins.slickCarousel();
            });
            $.post('{{ route('home.section.best_sellers') }}', {_token: '{{ csrf_token() }}'}, function (data) {
                $('#section_best_sellers').html(data);
                AIZ.plugins.slickCarousel();
            });
        });
    </script>
@endsection
